<link href='/static/packages/core/main.css' rel='stylesheet'/>
<link href='/static/packages/daygrid/main.css' rel='stylesheet'/>
<link href='/static/packages/timegrid/main.css' rel='stylesheet'/>
<link href='/static/packages/list/main.css' rel='stylesheet'/>
<script src='/static/packages/core/main.js'></script>
<script src='/static/packages/interaction/main.js'></script>
<script src='/static/packages/daygrid/main.js'></script>
<script src='/static/packages/timegrid/main.js'></script>
<script src='/static/packages/list/main.js'></script>
<script src="/static/admin/video/jquery.js"></script>

<div class="layui-row" id='wrap'>

    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div class="layui-fluid">
            <div id='calendar'></div>
            <div style='clear:both'></div>
        </div>
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>


    document.addEventListener('DOMContentLoaded', function () {
        var Calendar = FullCalendar.Calendar;


        var calendarEl = document.getElementById('calendar');
        var calendar = new Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            editable: true,
            theme: true,
            locale: 'zh-cn',
            events: function(info, successCallback, failureCallback) {
                $.ajax({
                    url: "{:url('administration/BirthdayCalendar')}",
                    type: "post",
                    dataType: "json",
                    success: function(res) { // 获取当前月的数据
                        var events = [];
                        $.each(res, function (i, c) {
                            events.push({
                                title: c.title,
                                start: c.start, // will be parsed
                                end: c.start,
                                allDay: true,
                                color: c.color,
                            });
                        });
                        successCallback(events);
                    }
                });
            },
            color: 'yellow',   // an option!
            textColor: 'black' // an option!
        });
        calendar.render();

    });

</script>